<template>
  <div class="smart-home">

    <!-- 面包屑 -->
    <el-card class="box-card box-card-bgcolor">
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/main/home' }">当前位置：首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>系统运行信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!-- 待处理事项： -->
    <el-card class="box-card box-card-bgcolor">
      <div slot="header" class="clearfix">
        <i class="el-icon-edit-outline icon-home"></i>
        <span class="home-title-text blue">系统信息统计</span>
      </div>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card class="box-card" shadow="always">
            <div slot="header" class="clearfix">
              <span>系统信息统计</span>
            </div>
            <!-- <div class="text item chart-content" id="pie-chart">
            </div> -->
            <div class="text item">
              <p>当前配置：1564865516465</p>
            </div>
            <div class="text item">
              <p>开启服务器时间：2016.08.06</p>
            </div>
            <div class="text item">
              <p>CPU内存（占用/剩余）：566562565</p>
            </div>
            <div class="text item">
              <p>当前IP接口：127.0.15.23</p>
            </div>
            <div class="text item">
              <p>当前通信口：120.0.15.11</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" shadow="always">
            <div slot="header" class="clearfix">
              <span>当前在线人数</span>
            </div>
            <div class="text item">
        <div class="pending-items">
          <el-table
            ref="multipleTable"
            :data="tableData"
            stripe
            tooltip-effect="dark"
            style="width: 100%"
            >
            <el-table-column
              prop="id"
              label="序号"
              class="table-textalign"
              >
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              class="table-textalign"
              >
            </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱"
              class="table-textalign"
              >
            </el-table-column>
            <el-table-column
              prop="user"
              label="用户"
              class="table-textalign"
              >
            </el-table-column>
          </el-table>
        </div>
      </div>
          </el-card>
        </el-col>

      </el-row>
    </el-card>

  </div>
</template>

<script>
export default {
  data(){
    return{
      icon1:"&#xe653;",
      icon2:"&#xe6b6;",
      icon3:"&#xe619;",
      tableData:''
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData() {
      this.tableData = [
        {
          id:1,
          title:'该厂商为前端设备常用VIP用户',
          email:'	29923423@qq.com',
          user: '青铜用户'
        },
         {
          id:2,
          title:'	该厂商为智能前端PC常用VIP用户',
          email:'	29923423@qq.com',
          user: '白银用户'
        },
         {
          id:3,
          title:'该厂商VIP用户',
          email:'	29923423@qq.com',
          user: '黄金用户'
        },
         {
          id:4,
          title:'该厂商为智能',
          email:'	29923423@qq.com',
          user: '白金用户'
        },
         {
          id:5,
          title:'该厂商为智能监控设备常用VIP用户',
          email:'	29923423@qq.com',
          user: '钻石用户'
        },
         {
          id:6,
          title:'该厂商为前端设备常用VIP用户',
          email:'	29923423@qq.com',
          user: '白银用户'
        },
         {
          id:7,
          title:'该厂商为前端设备常用VIP用户',
          email:'	29923423@qq.com',
          user: '白金用户'
        },
         {
          id:8,
          title:'该厂商为前端设备常用VIP用户',
          email:'	29923423@qq.com',
          user: '青铜用户'
        },
      ]
    }
  }
}
</script>

<style scoped lang="scss">
  @import '@/assets/css/systemruninfo.scss'
</style>
